<template lang="pug">
div(style="padding-bottom: 5rem")
  app-header(fixed,back,title="积分兑换",v-if="!$helper.isWechat")
  div(style="box-sizing:border-box")
    .header-image
      img(src="../../assets/img/integral.jpg")
      h5 可用积分: {{score === null ? profile.score : score}}分
    mt-navbar(v-model="selected")
      mt-tab-item(id="1") 兑换商品
      mt-tab-item(id="2") 兑换记录
      mt-tab-item(id="3") 兑换规则
    mt-tab-container(v-model="selected",:style="{'padding-top': '.1rem'}")
      mt-tab-container-item(id="1")
        div.goods-item(v-for="(item,index) in lists",:key="index")
          img(:src="item.icon")
          span {{item.score}} 分
          strong {{item.title}}
          button(@click="selectItem(item)") 兑换
      mt-tab-container-item(id="2")
        mt-cell(v-for="(item,index) in history",:key="index",:title="item.title",:value="item.time")
          img(slot="icon",:src="item.icon",:style="{width: '1.4rem', height: '1.4rem'}")
      mt-tab-container-item(id="3")
        div(v-html="explain",:style="{padding: '.2rem'}")
  mt-popup.address-box(v-model="popupVisible",position="right")
    h4 请选择送货地址
    ul
      li(v-for="item in address",@click="submitOrder(item.id)")
        strong {{item.user_name}}
        span {{item.city_name + item.detail_info}}
        span {{item.tel_number}}
</template>

<script>
import { Toast, Navbar, Popup, TabItem, TabContainer, TabContainerItem, Cell } from 'mint-ui'
import Header from 'components/Header'
import { mapGetters } from 'vuex'
export default {
  components: {
    'app-header': Header,
    'mt-navbar': Navbar,
    'mt-popup': Popup,
    'mt-tab-item': TabItem,
    'mt-tab-container': TabContainer,
    'mt-tab-container-item': TabContainerItem,
    'mt-cell': Cell
  },
  computed: {
    ...mapGetters({
      profile: 'getProfile'
    })
  },
  data () {
    return {
      score: null,
      selected: '1',
      lists: [],
      history: [],
      explain: '...',
      popupVisible: false,
      address: [],
      currentItem: null
    }
  },
  watch: {
    selected: {
      handler: async function (val, oldval) {
        let toast = Toast('正在加载..')
        let profileResult = await this.$rpc.invoke('user_profile', []).complete()
        this.score = this._.get(profileResult, 'data.score')
        if (val === '1') { // 加载兑奖商品
          let prizeResult = await this.$rpc.invoke('prize_lists', []).complete()
          if (prizeResult.code) {
            Toast(prizeResult.message)
          } else {
            this.lists = prizeResult.data
          }
        } else if (val === '2') { // 加载兑奖记录
          let prizeLogsResult = await this.$rpc.invoke('prize_logs', []).complete()
          if (prizeLogsResult.code) {
            Toast(prizeLogsResult.message)
          } else {
            this.history = prizeLogsResult.data
          }
        } else if (val === '3') { // 加载兑奖规则内容
          this.explain = await this.$rpc.invoke('pager_getContent', ['prize']).complete()
        }
        toast.close()
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    // 加载地址
    async loadAddressLists () {
      const result = await this.$rpc.invoke('address_lists', []).complete()
      if (result.code) {
        Toast(result.message)
        return false
      }
      this.address = result.data
      if (this.address.length < 1) {
        let instance = Toast('请添加一个收获地址')
        window.setTimeout(() => {
          instance.close()
          this.$router.push({name: 'user:address'})
        }, 2000)
        return false
      }
      return true
    },
    // 选择奖品
    async selectItem (item) {
      this.currentItem = item
      let bool = await this.loadAddressLists()
      if (!bool) {
        return
      }
      this.popupVisible = true
    },
    // 提交奖品
    async submitOrder (addressId) {
      const result = await this.$rpc.invoke('prize_traded', [addressId, this.currentItem.id]).complete()
      console.log(this.currentItem, addressId, result)
      this.popupVisible = false
    }
  }
}
</script>
<style lang="stylus" scoped>
.address-box
  position: absolute
  left: 0
  right: 0
  display: block
  padding: .5rem
  h4
    margin-bottom: .3rem
    border-bottom: 1px solid #ccc
    color: #666
    font-weight: normal
  li
    border-bottom: 1px solid #efefef
    cursor: pointer
    padding: .4rem 0
    list-style: none
    strong,span
      padding: 0 .1rem
.header-image
  img
    width: 100%
  h5
    text-align: left
    position: absolute
    margin-top: -2.1rem
    margin-left: .3rem
    width: 90%
    font-size: .5rem
    color: #fff
.goods-item
  border: 1px solid #ddd
  border-radius: 4px
  float: left
  width: 3rem
  height: 3rem
  margin: .3rem
  padding: .2rem
  background: #fff
  font-size: .3rem
  text-align: center
  img
    width: 1.6rem
    height: 1.6rem
    display: block
    margin: 0 auto
  span
    color: red
    width: 50%
    display: inline-block
    overflow: hidden
  strong
    font-weight: normal
    width: 50%
    display: inline-block
    overflow: hidden
  button
    border: none
    background: #26a3ff
    border-radius: .03rem
    color: #fff
    width: 80%
    padding: .04rem 0
    outline: none
    cursor: pointer
</style>
